<template>
<!-- 248, 248, 248 -->
  <div class="content-box">
    <!-- <van-nav-bar
      style="background-color: #f8f8f8;"
      title="查询预留手机号码"
    /> -->
    <div style="font-size: 16px; margin: 0 10px 0 10px;">
      <div class="text-box">
        <van-form>
          <article class="form-card">
            <van-cell-group>
              <van-cell title="证件类型：" value="社保卡" />
              <van-cell title="证件号码：" value="44022318541254115" />
              <van-cell title="姓名：" value="梁小小" />
              <van-cell title="预留手机号" :value="mobileNum" />
            </van-cell-group>
          </article>
          <div style="margin: 16px;">
            <van-button
              block
              @click="$router.go(-1)"
              type="info"
            ><span style="letter-space: 3px;">返 回</span></van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchPhone',
  data () {
    return {
      name: '张三',
      certificates: '社保卡',
      idNum: '440223199652455541',
      mobileNum: ''
    }
  },
  methods: {
    onClickLeft () {
      console.log('neiogn')
    }
  },
  mounted () {
    const bean = {
      aac003: '李燕好', // 姓名
      aac058: '01', // 证件类型
      aac147: '440111195901180328', // 证件号码
      aac161: 'CHN' // 国家地区
    }
    this.$http.post('getPhoneNumber', bean, { 'Content-Type': 'application/json' }
    ).then(res => {
      this.mobileNum = res.data.mobile
    })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

<style lang="less" scoped>
.content-box{
  // background-color: red;
  min-height: 100vh;
  background-color: #f8f8f8;
  .text-box{
    padding-top: 10px;
    .form-card{
      & /deep/ .van-cell__value{
        color: #000;
      }
      & /deep/ .van-cell__title{
        color: #969799;
      }
      & /deep/ .van-cell{
        color: #969799;
      }
    }
  }
}
</style>
